<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>S Curve Connection</title>
  </head>

  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script>
      // 获取 canvas 元素
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // 定义起始点和结束点
      const startX = 100;
      const startY = 100;
      const endX = 700;
      const endY = 500;

      // 计算控制点
      const controlX1 = startX + (endX - startX) * 0.5;
      const controlY1 = startY;
      const controlX2 = endX - (endX - startX) * 0.5;
      const controlY2 = endY;

      console.log('chaoyue-起始点', startX, startY);

      console.log('chaoyue-控制1', controlX1, controlY1);
      console.log('chaoyue-控制2', controlX2, controlY2);

      console.log('chaoyue-终止点', endX, endY);

      // 开始绘制路径
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      // 使用 bezierCurveTo 方法绘制三阶贝塞尔曲线
      ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 20;
      ctx.stroke();
    </script>
  </body>
</html>
